<template>
  <s-layout title="发布详情" navbar="inner" :bgStyle="{ color: '#f8f9fa' }">
    <view class="release-detail-page">
      <view v-if="releaseData" class="detail-container">
        <view class="detail-header">
          <text class="detail-title">{{ releaseData.title }}</text>
          <view class="header-info">
            <view class="type-tag">{{ getTypeName(releaseData.type) }}</view>
            <view class="status-badge" :class="getStatusClass(releaseData.status)">
              {{ getStatusText(releaseData.status) }}
            </view>
          </view>
        </view>
        
        <view class="detail-content">
          <view class="synopsis-section">
            <text class="section-title">内容简介</text>
            <text class="synopsis-text">{{ releaseData.synopsis }}</text>
          </view>
          
          <view v-if="releaseData.content" class="content-section">
            <text class="section-title">详细内容</text>
            <text class="content-text">{{ releaseData.content }}</text>
          </view>
          
          <view v-if="imageList.length > 0" class="image-section">
            <text class="section-title">图片展示</text>
            <view class="image-grid">
              <image 
                v-for="(image, index) in imageList" 
                :key="index"
                :src="image" 
                class="detail-image" 
                mode="aspectFill"
                @tap="previewImage(index)"
              />
            </view>
          </view>
          
          <view v-if="releaseData.tags" class="tags-section">
            <text class="section-title">标签</text>
            <view class="tag-list">
              <text 
                class="tag-item" 
                v-for="tag in releaseData.tags.split(',')" 
                :key="tag"
              >
                {{ tag.trim() }}
              </text>
            </view>
          </view>
          
          <view v-if="releaseData.phone" class="contact-section">
            <text class="section-title">联系方式</text>
            <view class="contact-item" @tap="callPhone">
              <text class="contact-icon">📞</text>
              <text class="contact-text">{{ releaseData.phone }}</text>
            </view>
          </view>
          
          <view v-if="releaseData.address" class="address-section">
            <text class="section-title">地址</text>
            <view class="address-item" @tap="openLocation">
              <text class="address-icon">📍</text>
              <text class="address-text">{{ releaseData.address }}</text>
            </view>
          </view>
        </view>
        
        <view class="detail-footer">
          <view class="time-info">
            <text class="create-time">发布时间：{{ formatTime(releaseData.createTime) }}</text>
            <text v-if="releaseData.reviewTime" class="review-time">
              审核时间：{{ formatTime(releaseData.reviewTime) }}
            </text>
          </view>
          
          <view v-if="releaseData.remark && releaseData.status === 2" class="reject-reason">
            <text class="reason-label">拒绝原因：</text>
            <text class="reason-text">{{ releaseData.remark }}</text>
          </view>
        </view>
      </view>
      
      <view v-else-if="loading" class="loading-state">
        <text class="loading-text">加载中...</text>
      </view>
      
      <s-empty 
        v-else 
        icon="/static/data-empty.png" 
        text="内容不存在"
      />
    </view>
  </s-layout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import sheep from '@/sheep'
import dayjs from 'dayjs'

const releaseTypes = [
  { value: 2, name: '推荐' },
  { value: 3, name: '视频' },
  { value: 7, name: '文旅' }
]

const releaseData = ref(null)
const loading = ref(false)
const releaseId = ref(null)

const imageList = computed(() => {
  if (!releaseData.value || !releaseData.value.pics) return []
  return releaseData.value.pics.split(',').filter(pic => pic.trim())
})

onLoad((options) => {
  if (options.id) {
    releaseId.value = options.id
    loadReleaseDetail()
  }
})

async function loadReleaseDetail() {
  loading.value = true
  
  try {
    const res = await sheep.$api.release.getById(releaseId.value)
    if (res) {
      releaseData.value = res
    }
  } catch (error) {
    console.error('加载发布详情失败:', error)
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

function getTypeName(type) {
  const typeItem = releaseTypes.find(item => item.value === type)
  return typeItem ? typeItem.name : '未知'
}

function getStatusText(status) {
  const statusMap = {
    0: '审核中',
    1: '已通过',
    2: '已拒绝'
  }
  return statusMap[status] || '未知'
}

function getStatusClass(status) {
  const classMap = {
    0: 'pending',
    1: 'approved',
    2: 'rejected'
  }
  return classMap[status] || ''
}

function formatTime(timeStr) {
  return dayjs(timeStr).format('YYYY-MM-DD HH:mm')
}

function previewImage(index) {
  uni.previewImage({
    urls: imageList.value,
    current: index
  })
}

function callPhone() {
  if (releaseData.value.phone) {
    uni.makePhoneCall({
      phoneNumber: releaseData.value.phone
    })
  }
}

function openLocation() {
  if (releaseData.value.address) {
    uni.openLocation({
      name: releaseData.value.address,
      address: releaseData.value.address
    })
  }
}
</script>

<style lang="scss" scoped>
.release-detail-page {
  padding: 20rpx;
}

.detail-container {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.detail-header {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  .detail-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    display: block;
    margin-bottom: 20rpx;
  }
  
  .header-info {
    display: flex;
    align-items: center;
    gap: 20rpx;
  }
  
  .type-tag {
    padding: 8rpx 16rpx;
    background: #f0f8ff;
    color: #007aff;
    font-size: 24rpx;
    border-radius: 16rpx;
  }
  
  .status-badge {
    padding: 8rpx 16rpx;
    font-size: 24rpx;
    border-radius: 16rpx;
    
    &.pending {
      background: #fff7e6;
      color: #fa8c16;
    }
    
    &.approved {
      background: #f6ffed;
      color: #52c41a;
    }
    
    &.rejected {
      background: #fff2f0;
      color: #ff4d4f;
    }
  }
}

.detail-content {
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.synopsis-section,
.content-section,
.image-section,
.tags-section,
.contact-section,
.address-section {
  margin-bottom: 40rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.synopsis-text,
.content-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10rpx;
  
  .detail-image {
    width: 100%;
    height: 200rpx;
    border-radius: 8rpx;
  }
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  
  .tag-item {
    padding: 8rpx 16rpx;
    background: #f5f5f5;
    color: #666;
    font-size: 24rpx;
    border-radius: 16rpx;
  }
}

.contact-item,
.address-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
  
  .contact-icon,
  .address-icon {
    font-size: 32rpx;
  }
  
  .contact-text,
  .address-text {
    font-size: 28rpx;
    color: #333;
    flex: 1;
  }
}

.detail-footer {
  padding: 30rpx;
  border-top: 1rpx solid #f0f0f0;
  background: #fafafa;
  
  .time-info {
    margin-bottom: 20rpx;
    
    .create-time,
    .review-time {
      display: block;
      font-size: 24rpx;
      color: #999;
      margin-bottom: 8rpx;
    }
  }
  
  .reject-reason {
    padding: 20rpx;
    background: #fff2f0;
    border-radius: 8rpx;
    border-left: 4rpx solid #ff4d4f;
    
    .reason-label {
      font-size: 26rpx;
      color: #ff4d4f;
      font-weight: 600;
    }
    
    .reason-text {
      font-size: 26rpx;
      color: #ff4d4f;
      margin-left: 10rpx;
    }
  }
}

.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
  
  .loading-text {
    font-size: 28rpx;
    color: #999;
  }
}
</style> 